import React, { Component } from "react";
import { NavBar, Icon} from "antd-mobile";
import "./Pay.scss";
// import myaxios from "../../utils/myaxios";
// import { withRouter } from "react-router-dom";
import emptyProduct from "../../assets/images/empty_product.jpg";

export default class Pay extends Component {
  //   constructor(props) {
  //     super(props);
  //   }
  state = {
    carts: [],
  };
  componentDidMount() {
    // this.setState({
    //   carts: this.props.location.state.carts || "[]",
    // });
    //获取本地缓存中的购物车数据
    let carts_str = localStorage.getItem("payitem");
    let carts = JSON.parse(carts_str || "[]");
    this.setState({
      carts,
    });
    this.handelHeji();

  }
  componentWillUnmount(){
    localStorage.removeItem("payitem");
  }
  // num操作
  handleNumClick = (payload) => {
    //获取本地缓存中的购物车数据
    let { num, id, act } = payload;
    let carts_str = localStorage.getItem("carts");
    let carts = JSON.parse(carts_str || "[]");
    if (act === "加") {
      carts[id].num = num + 1;
      this.setState({
        carts,
      });
      localStorage.setItem("carts", JSON.stringify(carts));
    } else if (act === "减") {
      if (num > 1) {
        carts[id].num = num - 1;
        this.setState({
          carts,
        });
        localStorage.setItem("carts", JSON.stringify(carts));
      }
      // else {
      //   confirm("确定要删除吗");
      //   if (confirm("确定要删除吗") == true) {
      //     carts.splice(id, 1);
      //     this.setState({
      //       carts,
      //     });
      //     localStorage.setItem("carts", JSON.stringify(carts));
      //   }
      // }
    }
    this.handelHeji();
  };
  // heji和 GoodsNum操作操作
  handelHeji = () => {
    let carts_str = localStorage.getItem("carts");
    let carts = JSON.parse(carts_str || "[]");
    let heji = 0;
    let GoodsNum = 0;
    //循环单选框框
    carts.forEach((v) => {
      if (v.checked) {
        heji += v.goods_price * v.num;
        GoodsNum += v.num;
      }
    });
    this.setState({
      heji,
      GoodsNum,
    });
  };
  render() {
    return (
      <div className="yg-pay">
        <NavBar
          className="pay-nav"
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => window.history.go(-1)}
        >
          搜索中心
        </NavBar>
        <div className="pay-pickAddress">
          <button>选择地址</button>
        </div>
        <div className="pay-main">
          <h3>已选商品</h3>
          {this.state.carts &&
            this.state.carts.map((v, i) => {
              return (
                <div className="pay-main-item" key={v.goods_id}>
                  <div className="pay-main-item-content">
                    <img
                      goods-id={v.goods_id}
                      src={
                        v.goods_small_logo ? v.goods_small_logo : emptyProduct
                      }
                      alt=""
                    />
                  </div>
                  <div className="pay-main-item-right">
                    <div goods-id={v.goods_id} className="item-right-title">
                      {v.goods_name}
                    </div>
                    <div className="item-right-price-num">
                      <div className="item-right-price">￥{v.goods_price}</div>
                      <div className="item-right-num">X{v.num}</div>
                    </div>
                  </div>
                </div>
              );
            })}
        </div>
        {/* 支付付款开始 */}
        <div className="pay-bottom">
          <div className="pay-bottom-common">
            合计：<span>￥{this.state.heji}</span>
          </div>
          <div className="pay-bottom-right">
            <button onClick={this.pay}>去支付({this.state.GoodsNum})</button>
          </div>
        </div>
        {/* 支付付款结算 */}
      </div>
    );
  }
}
